/*
描述：用户中心导航栏组件，提供用户相关页面的导航功能，包括个人中心、问题管理、回答管理、点赞记录和退出登录
完成人：吴悠
完成时间: 2025/04/27
*/

<script setup lang="ts">
import { useRouter } from 'vue-router';

const props = defineProps({
  nowPage: {
    type: Number,
    required: true
  }
});

const router = useRouter();

const goToUser = () => {
  router.push('/user');
};

const goToProfileEdit = () => {
  router.push('/user/profile-edit');
};

const goToMyQuestions = () => {
  router.push('/user/my-questions');
};

const goToMyAnswers = () => {
  router.push('/user/my-answers');
};

const goToMyLikes = () => {
  router.push('/user/my-likes');
};

const logout = () => {
  localStorage.removeItem('avatar');
  localStorage.removeItem('id');
  localStorage.removeItem('token');
  localStorage.removeItem('type');
  localStorage.removeItem('username');
  router.push('/home');
};

const getButtonColor = (index: number) => {
  if (index === props.nowPage) {
    return '#e7700d'; // Active color
  } else {
    return '#ffe9d1'; // Inactive color
  }
};

const getButtonTextColor = (index: number) => {
  if (index === props.nowPage) {
    return '#fff'; // Active text color (white)
  } else {
    return '#e7700d'; // Inactive text color (orange)
  }
};

</script>

<template>
  <div class="left-sidebar">
    <ul class="sidebar-menu">
      <li class="menu-item">
        <el-button
          round
          :color="getButtonColor(0)"
          :style="{ color: getButtonTextColor(0) }"
          @click="goToUser"
          class="sidebar-button">个人中心</el-button>
      </li>
      <li class="menu-item">
        <el-button
          round
          :color="getButtonColor(1)"
          :style="{ color: getButtonTextColor(1) }"
          @click="goToMyQuestions"
          class="sidebar-button">我的问题</el-button>
      </li>
      <li class="menu-item">
        <el-button
          round
          :color="getButtonColor(2)"
          :style="{ color: getButtonTextColor(2) }"
          @click="goToMyAnswers"
          class="sidebar-button">我的回答</el-button>
      </li>
      <li class="menu-item">
        <el-button
          round
          :color="getButtonColor(3)"
          :style="{ color: getButtonTextColor(3) }"
          @click="goToMyLikes"
          class="sidebar-button">我的点赞</el-button>
      </li>
      <li class="menu-item">
        <el-button
          round
          :color="getButtonColor(4)"
          :style="{ color: getButtonTextColor(4) }"
          @click="goToProfileEdit"
          class="sidebar-button">修改信息</el-button>
      </li>
      <li class="menu-item">
        <el-button
          round
          type="danger"
          @click="logout"
          class="sidebar-button">退出登录</el-button>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.left-sidebar {
  width: 240px;
  border-radius: 8px;
  height: 100vh;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  margin-bottom: 15px;
}

.menu-item:last-child {
  margin-bottom: 0;
}

.sidebar-button {
  width: 100%;
  padding: 12px 15px;
  transition: all 0.3s ease;
}

.sidebar-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 退出登录按钮文字颜色固定为白色 */
.sidebar-menu li:last-child .sidebar-button {
  color: #fff;
}
</style>
